<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="Totomo">
  <title>动态创建节点元素</title>
  <script type="text/javascript">
	function $(value){
		return document.getElementById(value)
	}

	function createSelect(numb){
		// 获取aa的输入内容
		var aavalue = $("aa"+numb).value;

		// 创建option节点
		var optionNode = document.createElement("option");

		// 设置option节点的value为aavalue
		optionNode.setAttribute("value",aavalue);

		// 给option添加一个文本节点，值为aavalue
		optionNode.appendChild(document.createTextNode(aavalue));

		// 添加option子节点到id为select1的父节点末尾
		$("select"+numb).appendChild(optionNode);
	}

	function deleteSelect(numb){
		var dd = $("select"+numb).selectedIndex;
		if(dd<0){
			alert("select节点未被选中，请选择");
			return ;
		}

		// 通过找option的index来定位子节点，然后用父节点.removeChild来删除该节点
		$("select"+numb).removeChild($("select"+numb).options[dd]);
	}

	function updateSelect(numb){
		var dd = $("select"+numb).selectedIndex;
		if(dd<0){
			alert("select节点未被选中，请选择");
			return ;
		}
		var optionNode_old = $("select"+numb).options[dd];
		
		var aavalue = $("aa"+numb).value;
		var optionNode_new = document.createElement("option");
		optionNode_new.setAttribute("value",aavalue);
		optionNode_new.appendChild(document.createTextNode(aavalue));

		$("select"+numb).replaceChild(optionNode_new,optionNode_old);
	}

	function right(){
		// 把左选项移到右边最后一个
		var aavalue = $("select2");
		var dd = $("select1").selectedIndex;
		if(dd<0){
			alert("select节点未被选中，请选择");
			return ;
		}
		var optionNode = $("select1").options[dd];
		$("select2").appendChild(optionNode);

		$("select1").removeChild(optionNode);

	}

	function left(){
		// 把右选项移到左边最后一个
		var aavalue = $("select1");
		var dd = $("select2").selectedIndex;
		if(dd<0){
			alert("select节点未被选中，请选择");
			return ;
		}
		var optionNode = $("select2").options[dd];
		$("select1").appendChild(optionNode);

		$("select2").removeChild(optionNode);
	}

	function down(){
		// 选中的选项向下移动
		var aavalue1 = $("select1");
		var aavalue2 = $("select2");
		var dd1 = $("select1").selectedIndex;
		var dd2 = $("select2").selectedIndex;
		if((dd1>=0)&&((dd1+1) in $("select1").options)){
			var optionNode1 = $("select1").options[dd1];
			var optionNode1_b = $("select1").options[dd1+1];
			$("select1").insertBefore(optionNode1_b,optionNode1);

			if((dd2>=0)&&((dd2+1) in $("select2").options)){
				var optionNode2 = $("select2").options[dd2];
				var optionNode2_b = $("select2").options[dd2+1];
				$("select2").insertBefore(optionNode2_b,optionNode2);
			}
		}else if ((dd2>=0)&&((dd2+1) in $("select2").options))
		{
			var optionNode2 = $("select2").options[dd2];
			var optionNode2_b = $("select2").options[dd2+1];
			$("select2").insertBefore(optionNode2_b,optionNode2);

		}else if ((dd1<0)||(dd2<0)){
			alert("select节点未被选中，请选择");
		}
	}

	function up(){
		// 选中的选项向上移动
		var aavalue1 = $("select1");
		var aavalue2 = $("select2");
		var dd1 = $("select1").selectedIndex;
		var dd2 = $("select2").selectedIndex;

		if((dd1>=0)&&((dd1-1) in $("select1").options)){
			var optionNode1 = $("select1").options[dd1];
			var optionNode1_b = $("select1").options[dd1-1];
			$("select1").insertBefore(optionNode1,optionNode1_b);

			if((dd2>=0)&&((dd2-1) in $("select2").options)){
				var optionNode2 = $("select2").options[dd2];
				var optionNode2_b = $("select2").options[dd2-1];
				$("select2").insertBefore(optionNode2,optionNode2_b);
			}
		}else if ((dd2>=0)&&((dd2-1) in $("select2").options))
		{
			var optionNode2 = $("select2").options[dd2];
			var optionNode2_b = $("select2").options[dd2-1];
			$("select2").insertBefore(optionNode2,optionNode2_b);

		}else if ((dd1<0)&&(dd2<0)){
			alert("select节点未被选中，请选择");
		}
	}
  </script>
  <style type="text/css">
	select,input{
		width:200px;
		margin: 10px 0px 5px 0px;
	}
	button{
		width:62px;
		margin: auto;
	}
	.left {
		float: left;
	}
	.right {
		margin: auto;
		margin-left: 300px;
		line-height:0px;
	}
	.middle {
	    margin: auto;
		float: left;
		margin-left: 30px;
		line-height:80px;
	}
  </style>
 </head>
 <body>
  <div class="left">
	<input type="text" id="aa1"/><br/>
	<button onclick="createSelect(1);">创建</button>
	<button onclick="deleteSelect(1);">移除</button>
	<button onclick="updateSelect(1);">修改</button><br/>
	<select id="select1" size="20">
		<option value="湖北省">湖北省</option>
		<option value="广东省">广东省</option>
	</select>
  </div>
  <div class="middle">
    <br/>
	<button onclick="right();" style="width:30px;height:50px">&nbsp;→&nbsp;</button><br/>
	<button onclick="left();" style="width:30px;height:50px">&nbsp;←&nbsp;</button><br/>
	<button onclick="down();" style="width:30px;height:50px">&nbsp;↓&nbsp;</button><br/>
	<button onclick="up();" style="width:30px;height:50px">&nbsp;↑&nbsp;</button><br/>
  </div>
  <div class="right">
  	<input type="text" id="aa2"/><br/>
	<button onclick="createSelect(2);">创建</button>
	<button onclick="deleteSelect(2);">移除</button>
	<button onclick="updateSelect(2);">修改</button><br/>
	<select id="select2" size="20">
		<option value="湖北省">湖北省</option>
		<option value="广东省">广东省</option>
	</select>
  </div>
 </body>
</html>
